<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaGEOJson from "./china.json";

const mapName = "chinaMap";
// 注册中国地图
echarts.registerMap(mapName, chinaGEOJson);

defineOptions({ name: "Demo01.vue" });

const echartsDomRef = ref();

function initComp(echartsDom) {
  const myChart = echarts.init(echartsDom);
  var option = {
    tooltip: {},
    geo: {
      // show:false,
      roam: true,
      map: mapName,
      emphasis: {
        label: {
          show: false,
        },
      },
    },
    series: [
      {
        type: "scatter", // 带特效的散点
        coordinateSystem: "geo", // 绑定到geo坐标系, 要求必须配置geo属性
        symbol: "pin", // 图标类型
        symbolSize: 20,
        // rippleEffect: { brushType: "stroke" }, // 波纹效果
        data: [
          // 数据格式：[经度, 纬度, 数值(可选)]
          { name: "长春市", value: [125.3245, 43.886841] },
          { name: "重庆市", value: [106.55, 29.56] },
          {
            name: "长沙市",
            value: [112.982279, 28.19409],
            itemStyle: { color: "red" },
            symbolSize: 30,
          },
        ],
        // itemStyle: { color: "#FEC514" },
        label: {
          show: true,
          fontSize: 16,
          position: "top",
          formatter: (...args) => {
            console.log("args", args);
            return args[0].name;
          },
        },
      },
      // geo与map系列同时使用,会生成层叠的两个地图
      // {
      //   name: "自定义标记点",
      //   type: "map",
      //   map: mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
      //   label: {
      //     // 去除hover时显示的省份名称
      //     show: false,
      //     fontSize: 0,
      //   },
      //   /**
      //    * 地图缩放
      //    */
      //   zoom: 1.2,
      //   markPoint: {
      //     symbol: "pin", // 自定义图片路径
      //     symbolSize: [20, 20], // 图片大小
      //     itemStyle: {
      //       color: "red",
      //     },
      //     label: {
      //       position: "top",
      //       color: "green",
      //       fontSize: 20,
      //     },
      //     // coord数组存放地址坐标
      //     data: [
      //       { name: "湖南省", coord: [112.982279, 28.19409], value: "长沙市" },
      //       {
      //         name: "四川省",
      //         coord: [106.55, 29.56, 32],
      //         value: "重庆市",
      //         itemStyle: {
      //           color: "blue",
      //         },
      //       },
      //       {
      //         name: "吉林省",
      //         coord: [125.3245, 43.886841],
      //         value: "长春市",
      //         itemStyle: {
      //           color: "blue",
      //         },
      //       },
      //     ],
      //   },
      // },
      {
        // 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化
        type: "lines",
        coordinateSystem: "geo", // 绑定到geo坐标系, 要求必须配置geo属性
        zlevel: 6, // 处于垂直的最高层级
        z: 3,
        effect: {
          trailLength: 1,
        },
        data: [
          {
            coords: [
              [112.982279, 28.19409], //起点
              [106.55, 29.56, 32], // 终点
            ],
          },
          {
            coords: [
              [112.982279, 28.19409], //起点
              [125.3245, 43.886841], // 终点
            ],
          },
        ],
        effect: {
          show: true,
          constantSpeed: 50,
          symbol: "arrow", // 箭头
          symbolSize: 10,
          trailLength: 0,
        },
      },
    ],
  };
  myChart.setOption(option);
}
onMounted(() => {
  const echartsDom = echartsDomRef.value;
  if (echartsDom) {
    initComp(echartsDom);
  }
});
</script>

<template>
  <div ref="echartsDomRef" style="height: 500px"></div>
</template>

<style lang="scss" scoped></style>
